<template>
  <div class="hello">
    <h1><router-link to="/settings">设置</router-link></h1>
    <h2>{{ state }}</h2>
    <div>
      <span label="刷新" @click="isAlive">
        <svg
          t="1603090529408"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27076"
          width="32"
          height="32"
        >
          <path
            d="M511.1 63.5C263.8 63.5 63.3 264 63.3 511.2S263.8 959 511.1 959s447.8-200.5 447.8-447.8S758.4 63.5 511.1 63.5z m205.5 485.7c-18.2 99.1-104.6 171-205.5 171-115.2 0-209-93.7-209-209s93.7-209 209-209c45.1 0 88.5 14.9 124 41v-28c0-16.5 13.4-29.8 29.9-29.8s29.8 13.4 29.8 29.8v104.2c0 0.4-0.1 0.7-0.1 1.1 0 0.5-0.1 0.9-0.1 1.4-1.2 15.4-14.1 27.4-29.6 27.4H560.5c-16.5 0-29.8-13.4-29.8-29.9s13.4-29.8 29.8-29.8h37.2c-25.3-18.1-55.6-27.8-86.7-27.7-82.3 0-149.3 67-149.3 149.3s67 149.3 149.3 149.3c72 0.1 133.7-51.3 146.8-122.1 3-16.2 18.5-26.9 34.8-24 16.2 3 27 18.6 24 34.8z"
            fill="#28AA24"
            p-id="27077"
          ></path></svg
      ></span>
      <span label="暂停" @click="stop">
        <svg
          t="1603090927622"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="29166"
          width="32"
          height="32"
        >
          <path
            d="M544 518.4m-480 0a480 480 0 1 0 960 0 480 480 0 1 0-960 0Z"
            fill="#FFBE33"
            p-id="29167"
          ></path>
          <path d="M384 358.4h320v320H384z" fill="#FFFFFF" p-id="29168"></path>
        </svg>
      </span>
      <span label="运行" @click="run">
        <svg
          t="1603090957608"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="30012"
          width="32"
          height="32"
        >
          <path
            d="M149.989688 874.093352a509.948138 509.948138 0 1 0-109.714286-162.700613 513.206978 513.206978 0 0 0 109.714286 162.700613z"
            fill="#68b305"
            p-id="30013"
          ></path>
          <path
            d="M429.646454 687.977369a57.331447 57.331447 0 0 0 27.277699 7.000472 60.348892 60.348892 0 0 0 32.829797-10.017916l175.977369-115.990571a68.677039 68.677039 0 0 0 30.777935-58.055634 66.504479 66.504479 0 0 0-29.812353-56.486563l-177.54644-115.749175a57.934936 57.934936 0 0 0-60.348892-3.017445 67.832155 67.832155 0 0 0-33.312588 60.348893V627.628477a67.470061 67.470061 0 0 0 34.157473 60.348892z"
            fill="#FFFFFF"
            p-id="30014"
          ></path>
        </svg>
      </span>
    </div>
    <textarea
      v-if="log"
      v-model="log"
      style="height: 50vh; width: 25rem"
      readonly
    />
    <div>
      <button @click="log = '\n'">清空</button>
      <button @click="">关闭1</button>
    </div>
  </div>
</template>

<script>
import {fc} from "@/module/frp-control";
let mlog
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "远程服务供给工具",
      state: "reload",
      log: "\n",
    };
  },
  methods: {
    isAlive() {
      const name = "frpc.exe";
      // this.state = "未运行";
      fc.search((err, out, error) => {
        if (out.includes(name)) {
          console.log("运行中");
          this.state = "运行中";
        }else{
          this.state =  "未运行"
        }
        // if (err) console.log(err);
        // if (error) console.log(error);
      }, name);
    },
    run() {
      fc.runSpawn(this.isAlive)
      setTimeout(() => {
        this.isAlive();
      }, 1000);
    },
    stop() {
      fc.stop((err, out, error) => {
        console.log(out);
        // console.log(err);
        // console.log(error);
      });
      setTimeout(() => {
        this.isAlive();
      }, 1000);
    },
    read(){
      console.log("read");
      mlog = fc.logSpawn(data=>{
        this.log += data
      })
    }
  },
  mounted() {
    this.isAlive();
    this.read();
  },
  destroyed() {
    if(mlog != null){
      mlog.exit()
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
